<template>
  <div>
    <el-dialog title="详情" :visible.sync="visibile" append-to-body width="70%" @close="handleCancel" top="5vh" v-if="visibile">
      <div class="sail-header-dialog-content">
        <avue-form ref="from" :option="formOption" v-model="form">
          <template slot-scope="{}" slot="result">
            <div class="result-container">
              <div class="result-item">对账笔数:{{ form.checkCount }}</div>
              <div class="result-item">相符笔数:{{ form.matchCount }}</div>
              <div class="result-item">不相符笔数:{{ form.notMatchCount }}</div>
            </div>
          </template>
        </avue-form>
        <avue-crud ref="crud" :option="option" :table-loading="loading" :data="data" :page.sync="page" @current-change="currentChange" @size-change="sizeChange">
          <template slot="menuLeft">
            <el-button type="primary" size="small" @click="handleExportDetail('difference')">导出差异明细 </el-button>
            <el-button type="primary" size="small" @click="handleExportDetail('all')">导出全部明细 </el-button>
          </template>
        </avue-crud>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCancel">取 消</el-button>
      </span>
    </el-dialog>
    <export-comp ref="exportComp" page-api-url="mes-warehouse/erpinventorycheckdetail/page" :option="option" :page="page" :query="exportParams" :file-name="exportTitle">
    </export-comp>
  </div>
</template>

<script>
import { getReconciliation, getReconciliationList } from '@/api/warehouse/erpReconciliation';
import exportComp from '@/components/export-comp/index';

const COLUMN = [
  {
    label: '仓库',
    prop: 'inventoryName'
  },
  {
    label: '物料编码',
    prop: 'partNo'
  },
  {
    label: '物料名称',
    prop: 'partName'
  },
  {
    label: '物料规格',
    prop: 'partModel'
  },
  {
    label: 'MES数量',
    prop: 'mesQuantity'
  },
  {
    label: 'ERP数量',
    prop: 'erpQuantity'
  },
  {
    label: '对账结果',
    prop: 'checkResult',
    type: 'select',
    dicData: [
      { label: '相符', value: '' },
      { label: '不相符', value: 'DISCREPANCY' }
    ]
  },
  {
    label: '数量差异',
    prop: 'discrepancyQuantity'
  },
  {
    label: '对账时间',
    prop: 'checkTime'
  }
];
export default {
  props: {
    visibile: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    exportComp
  },
  name: 'recordDetailDialog',
  data() {
    return {
      exportParams: {},
      exportTitle: '',
      formOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: '120',
        group: [
          {
            label: '对账维度',
            icon: 'el-icon-vertical-bar',
            arrow: false,
            border: false,
            column: [
              {
                label: '对账时间',
                prop: 'checkTime',
                disabled: true
              },
              {
                label: '对账人',
                prop: 'user',
                disabled: true
              },
              {
                label: '对账维度',
                prop: 'checkDimensionality',
                type: 'select',
                disabled: true,
                dicData: [
                  { label: '物料', value: 'MATERIAL' },
                  { label: '仓库', value: 'INVENTORY' }
                ]
              },
              {
                label: '对账方式',
                prop: 'checkType',
                type: 'select',
                disabled: true,
                dicData: [
                  { label: '自动', value: 'AUTO' },
                  { label: '手动', value: 'MANUAL' }
                ]
              },
              {
                label: '',
                labelWidth: '50',
                prop: 'result'
              }
            ]
          },
          {
            label: '对账结果',
            arrow: false,
            icon: 'el-icon-vertical-bar'
          }
        ]
      },
      form: {},
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      detailId: '',
      data: [],
      loading: false,
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        menu: false,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        indexLabel: '序号',
        columnBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        column: []
      }
    };
  },
  methods: {
    async getData(id) {
      this.detailId = id;
      this.loading = true;
      try {
        const res = await getReconciliation(id);
        this.form = res.data.data;
        this.form.user = res.data.data.createUserName || res.data.data.updateUserName;
        let column;
        if (this.form.checkDimensionality === 'MATERIAL') {
          column = COLUMN.slice(1);
        } else {
          column = COLUMN;
        }
        console.log(column);
        this.$set(this.option, 'column', column);
        await this.onLoad(id);
        this.$refs.crud.refreshTable();
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    async onLoad(id) {
      this.loading = true;
      try {
        const params = Object.assign({ inventoryCheckId: id }, { current: this.page.currentPage, size: this.page.pageSize });
        const res = await getReconciliationList(params);
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
    },
    handleCancel() {
      this.$emit('update:visibile', false);
      this.$emit('onCancel');
    },
    handleExportDetail(type) {
      this.exportTitle = type === 'all' ? 'erp对账全部明细' : 'erp对账差异明细';
      const params = {
        checkResult: type === 'all' ? '' : 'DISCREPANCY',
        inventoryCheckId: this.detailId
      };
      this.exportParams = params;
      this.$refs.exportComp.visible = true;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.detailId);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.detailId);
    }
  }
};
</script>

<style scoped lang="scss">
.result-container {
  display: flex;
  color: red;
  font-size: 14px;
  font-weight: bold;
  .result-item {
    width: 200px;
  }
}
</style>
